<template>
  <div class="common-header">
    <div class="left-btn">
      <span @click="goHome">首页</span>
      <slot name="porjectBtn"><span @click="goProject">项目</span></slot>
      <slot name="porjectName"><span>{{headTitle}}</span></slot>
    </div>

    <div class="title">
      <slot name="cameraAndCar" class="icon-box">
        <Icon type="ios-videocam" @click="goCam" />
        <Icon type="md-car" @click="goCar" />
      </slot>
    </div>
    <!-- <div class="right-btn"></div> -->
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  props:['headTitle'],
  data() {
    return {

    }
  },
  components: {

  },
  methods: {
    goHome(){
      this.$router.push({path:'/'})
    },
    goProject(){
      this.$router.push({path:'/whiteborder'})
    },
    goCam(){
      this.$router.push({path:'/wbdetails'})
    },
    goCar(){
      this.$router.push({path:'/carinfo'})
    }
  }
}
</script>

<style scoped lang='scss'>
.common-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #333;

  .left-btn{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    // width: 60%;
    height: 100%;
    margin-left: 30px;
    span{
      color: #fff;
      font-size: 16px;
      margin-left: 20px;
    }

    .icon-box{
      margin-left: 40px;
    }


  }

  .title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30px;
    height: 100%;
    flex: 1;

    .ivu-icon{
        font-size: 36px;
        margin-right:20px;
        color: #fff;
    }

    .ivu-icon-ios-videocam{
      margin-left: 40px;
      color: #108ee9;
    }

    .ivu-icon-md-car{
      color: #7ec856;
    }
  }
}
</style>
